import React from 'react';

import BaseDiv from '@/components/baseDiv';
import { data } from '@/pages/Customized/component/Describe/data';

import styles from './index.less';
const boxStyles: React.CSSProperties = {
  height: '496px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  background: 'rgba(255, 255, 255, 0.39)',
};
const baseStyles: React.CSSProperties = {
  opacity: 1,
};
export default function Describe() {
  return (
    <BaseDiv baseStyles={baseStyles} boxStyles={boxStyles}>
      <div className={styles.des}>
        {data.map((item) => {
          return (
            <div className={styles.desContent}>
              <div className={styles.avatar}>
                <img src={item.url} alt="" />
              </div>
              <div className={styles.word}>
                <div>{item.title}</div>
                <div>{item.des}</div>
              </div>
            </div>
          );
        })}
      </div>
    </BaseDiv>
  );
}
